<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card style="padding:10px 50px">
        <!-- row行 col列  row有24列 -->
        <TreeTools
          style="border-bottom: 1px solid #ccc; padding: 12px 0"
          :node-data="companyData"
          :is-root="false"
          @showAddDialog="showAddDialog"
        />
        <!-- 认识树形控件 -->
        <!-- :data是树形控件绑定的数据源的属性, 属性对应要求是数组包对象的格式
          props 属性可以修改配置 展示的字段和父子节点的依赖关系
          default-expand-all 展开所有节点
         -->
        <el-tree :data="depts" :props="defaultProps" default-expand-all>
          <!-- 使用作用域会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据 -->
          <template #default="{ data }">
            <TreeTools
              :node-data="data"
              @reload="getDepts"
              @showAddDialog="showAddDialog"
              @showEditDialog="showEditDialog"
            />
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 添加部门的对话框 -->
    <AddDept
      ref="addDeptRef"
      :dialog-visible.sync="dialogVisible"
      :node-data="nodeData"
      :source-depts="sourceDepts"
      @addDept="getDepts"
    />
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import AddDept from './components/AddDept.vue'
import { reqGetDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
import mixin from '@/mixins'
export default {
  name: 'Departments',
  components: { TreeTools, AddDept },
  mixins: [mixin],
  data() {
    return {
      // msg: '组织架构',
      /* list: [
        // 默认情况下: label是展示到界面的, children 是父子节点依赖关系的属性
        { name: '魏国', child: [{ name: '曹操', child: [{ name: '曹丕', child: [{ name: '曹叡' }] }] }] },
        { name: '蜀国', child: [{ name: '接着奏乐' }] },
        { name: '吴国', child: [{ name: '孙权' }] }
      ], */
      depts: [], // 部门列表数据
      // 修改树形数据的父子节点关系和展示的属性
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      companyData: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        children: [],
        id: '' // 指定添加一级部门的准备的pid字段

      },
      dialogVisible: false, // 控制新增部门对话框展示的布尔值
      nodeData: {}, // 点击添加按钮传递过来的数据
      sourceDepts: [] // 部门列表的原始数据(未处理成树形结构的数据)
    }
  },
  created() {
    this.getDepts()
    // console.log('hello')
  },

  methods: {
    sayHaha() {
      console.log('组件架构的哈哈')
    },
    // 获取部门列表
    async getDepts() {
      const { data } = await reqGetDepartments()
      // 1. 存储一份原始数据
      this.sourceDepts = data.depts
      this.depts = tranListToTreeData(data.depts, '')
      // 筛查一级部门将一级部门列表赋值给companyData中的children
      this.companyData.children = data.depts.filter(item => item.pid === '')
    },
    // 点击新增子部门展示对话框
    showAddDialog(nodeData) {
      this.dialogVisible = true
      this.nodeData = nodeData
      // 直接访问子组件设置对话框的标题
      this.$refs.addDeptRef.title = '新增部门'
    },
    // 点击编辑部门展示对话框
    showEditDialog(nodeData) {
      console.log(nodeData)
      this.dialogVisible = true
      this.nodeData = nodeData
      // 通过refs找到子组件addDept,将nodeData数据交给 form
      // 这种方式实现的数据回显 导致数据会有滞后(不推荐)
      // this.$refs.addDeptRef.form = nodeData
      // 通过refs查找到子组件并调用获取部门详情的方法
      this.$refs.addDeptRef.getDepartDetailById(this.nodeData.id)
      // 直接访问子组件设置对话框的标题
      this.$refs.addDeptRef.title = '编辑部门'
    }
  }

}
</script>

<style lang="scss" scoped>
// 直接覆盖树形样式即可
// /deep/ less中的深度选择器
// ::v-deep scss中的深度选择器
::v-deep .el-tree-node__content{
  height: 40px;
}
::v-deep .el-tree {

    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/sub.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/man.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }

}
</style>
